<template>
  <div>
    <div class="h_header flexrowbetween">
      <span>{{dayname}}总计划/投放中计划</span>
      <SelectTime @changeTime="changeTime" :type='2' />
    </div>
    <div class="h_content flex" v-loading="loading">
      <div class="d_left">
        <div class="activebox flexcenter bg_F8F8F8 mb_30 mt_10">
          <div>
            <div class="f-14 c_000 mb_10">{{dayname}}总计划</div>
            <div class="flexcenter aligncenter">
              <div class="f-24 c_000 mr_8">{{dataInfo.all_num}}</div>
              <div class="f-14 c_000">个</div>
            </div>
          </div>
        </div>
        <div class="activebox flexcenter bg_F8F8F8 mb_30 mt_20">
          <div>
            <div class="f-14 c_000 mb_10">{{dayname}}投放中计划</div>
            <div class="flexcenter aligncenter">
              <div class="f-24 c_000 mr_8">{{dataInfo.work_num}}</div>
              <div class="f-14 c_000">个</div>
            </div>
          </div>
        </div>
        <div class="activebox flexcenter bg_F8F8F8 mb_30 mt_20">
          <div>
            <div class="f-14 c_000 mb_10">{{dayname}}暂停计划</div>
            <div class="flexcenter aligncenter">
              <div class="f-24 c_000 mr_8">{{dataInfo.stop_num}}</div>
              <div class="f-14 c_000">个</div>
            </div>
          </div>
        </div>
        <div class="activebox flexcenter bg_F8F8F8 mb_20 mt_20">
          <div>
            <div class="f-14 c_000 mb_10">{{dayname}}待审核计划</div>
            <div class="flexcenter aligncenter">
              <div class="f-24 c_000 mr_8">{{dataInfo.check_num}}</div>
              <div class="f-14 c_000">个</div>
            </div>
          </div>
        </div>
      </div>
      <div class="d_right">
        <bar-chart v-if="!loading"
          class="mt_20"
          :xAxis="xAxis"
          :legendname="legendname"
          :chart-data="lineChartData"
          height="430px"
        />
      </div>
    </div>
  </div>
</template>
<script>
import BarChart from "@/components/Echart/BarChart";
import SelectTime from "./SelectTime.vue";
import { time_date } from '@/utils/validate'
import {
  planNumHour,
  planNumDay,
  planNumMonth,
} from "@/api/home";
export default {
  data() {
    return {
      loading: false,
      time: "",
      xAxis: [],
      legendname: [
        { name: "投放中", id: "checkData" },
        { name: "暂停", id: "stopData" },
        { name: "待审核", id: "workData" },
      ],
      lineChartData: {
        checkData: [],
        stopData: [],
        workData: [],
      },
      dayname: "今日",
      dataInfo: {
        all_num: 0,
        check_num: 0,
        stop_num: 0,
        work_num: 0
      },
      rate1: "",
      rate2: "",
      rate3: "",
    };
  },
  props: {
    title: {
      default: "",
    },
  },
  components: {
    BarChart,
    SelectTime,
  },
  created() {
    let now_start = this.parseTime(time_date(1).start)
    let now_end = this.parseTime(time_date(1).end)
    this.getHourList({now_start,now_end});
  },
  methods: {
    // 选择时间
    changeTime(params) {
      // console.log(params)
      this.dayname = params.item.name
      if(params.item.value == 1){
        this.getHourList(params.params)
      }else if(params.item.value == 2||params.item.value == 3){
        this.getDayList(params.params)
      }else if(params.item.value == 4){
        this.getMonthList(params.params)
      }else{
        this.getDayList(params.params)
      }
    },

    getHourList(params) {
      this.loading = true;
      let p_params = {
        start_time: params.now_start,
        end_time: params.now_end,
      }
      planNumHour(p_params).then((res) => {
        this.loading = false;
        this.setData(res.data);
      }).catch(()=>{
        this.loading = false;
      })
    },

    getDayList(params){
      this.loading = true;
      let p_params = {
        start_time: params.now_start,
        end_time: params.now_end,
      }
      planNumDay(p_params).then((res) => {
        this.loading = false;
        this.setData(res.data);
      }).catch(()=>{
        this.loading = false;
      })
    },

    getMonthList(params){
      this.loading = true;
      let p_params = {
        start_time: params.now_start,
        end_time: params.now_end,
      }
      planNumMonth(p_params).then((res) => {
        this.loading = false;
        this.setData(res.data);
      }).catch(()=>{
        this.loading = false;
      })
    },

    setData(data) {
      let xAxis = [],
        checkData = [],
        stopData = [],
        workData = [];
      data.list.forEach((item) => {
        xAxis.push(item.time);
        checkData.push(item.data.check);
        stopData.push(item.data.stop);
        workData.push(item.data.work);
      });
      this.xAxis = xAxis;
      this.lineChartData.checkData = checkData;
      this.lineChartData.stopData = stopData;
      this.lineChartData.workData = workData;

      this.dataInfo.all_num = data.all_num;
      this.dataInfo.check_num = data.check_num;
      this.dataInfo.stop_num = data.stop_num;
      this.dataInfo.work_num = data.work_num;
      let pay = data.pay;
      if (pay.old == 0) {
        this.rate1 = 0;
      } else {
        this.rate1 = (((pay.now - pay.old) / pay.old) * 100).toFixed(2);
      }
      let use = data.use;
      if (use.old == 0) {
        this.rate2 = 0;
      } else {
        this.rate2 = (((use.now - use.old) / use.old) * 100).toFixed(2);
      }
      let task = data.task;
      if (task.old == 0) {
        this.rate3 = 0;
      } else {
        this.rate3 = (((task.now - task.old) / task.old) * 100).toFixed(2);
      }
    },

    handleClick(item) {
      this.daynum = item.value;
    },
  },
};
</script>
<style lang="scss" scoped>
.h_header {
  border-bottom: 1px solid #d5d5d5;
  height: 55px;
  padding: 0 15px;
}
.h_content {
  padding: 25px;
  width: 100%;
}
.d_left{
  width: 25%;
  padding-right: 30px;
}
.d_right{
  width: 75%;
  padding-left: 30px;
}
.activebox {
  width: 100%;
  height: 82px;
  // max-width: 240px;
  padding: 15px 24px;
}
</style>
